<template>
    <div class="page-container">
        <article class="article">
            <div class="article-left tran-all" :style="{width:leftIsShow?'270px':'0px'}">
                <div class="logo flex-center flex-start color-white bold pl-55 pr-15 font26 t-hidden">
                    {{ company_information.short_name }}
                </div>
                <div class="left-div pl-15 pr-15">
                    <ul class="tran-all" id="left-navs" v-if="leftIsShow&&navs.length">
                        <li class="tran-all mt-10" v-for="(item1,idx1) in navs" :key="idx1">
                            <dl class="tran-all">
                                <dt class="tran-all c-pointer" :class="index1==idx1?'active':''"
                                    @click="clickFirst(idx1)">
                                    <div class="tran-all">
                                        <span class="zsf-icon font20"
                                              :class="item1.icon?item1.icon:'zsf-icon-wenjianjia'"></span>
                                        <span style="margin-left:8px;">{{ item1.name }}</span>
                                    </div>
                                    <span class="el-icon-arrow-down tran-all" v-if="item1['child'].length"
                                          :style="{transform:item1['select']?'rotate(180deg)':'rotate(0deg)'}"></span>
                                </dt>
                                <dd class="tran-all c-pointer"
                                    v-if="item1['child'].length>0"
                                    :style="{height:item1['select']?item1['child']&&((Math.ceil(item1['child'].length/2))*36)+'px':'0'}">
                                    <div class="t-hidden tran-all mt-10" :class="idx1==index1&&idx2==index2?'active':''"
                                         @click="clickSecend(idx1,idx2)"
                                         v-for="(item2,idx2) in item1.child" :key="idx2">
                                        <span class="t-hidden tran-all">{{ item2.name }}</span>
                                    </div>
                                </dd>
                            </dl>
                        </li>
                    </ul>

                    <div class="pl-15 color-white mt-100">版本号：{{ version }}</div>

                    <div style="height:15px"></div>
                </div>
            </div>
            <div class="article-right">
                <div class="article-right-top pl-15 pr-20">
                    <div class="c-pointer flex-center flex-start" @click="toggleLeft">
            <span class="zsf-icon color-666 zsf-icon-shuangjiantouzuo font20 color-warning tran-all mr-5"
                  :style="{transform:!leftIsShow?'rotate(180deg)':'rotate(0deg)'}" style="display:inline-block;"></span>
                        <span class="font16 color-warning">{{ company_information.name }} 后台管理系统</span>
                    </div>
                    <div class="d pic flex-center c-pointer">
                        <div>你好，<b>{{ userinfo['username'] }}</b><span
                            class="ml-10 mr-5 color-warning">{{ userinfo['user_role_name'] }}</span>
                        </div>
                        <img src="../common/images/headimg.png"/>
                        <span class="el-icon-arrow-down ml-5"></span>
                    </div>
                </div>
                <div class="p-15 right-div">
                    <router-view>
                        <slot></slot>
                    </router-view>
                </div>
            </div>
        </article>
        <div class="user-info" style="display:none">
            <div class="u p-20 flex-center flex-start">
                <img src="../common/images/headimg.png"/>
                <div class="ml-15">
                    <div>账号：{{ userinfo['username'] }}</div>
                    <div class="mt-10">角色：{{ userinfo['user_role_name'] }}
                    </div>
                </div>
            </div>
            <div class="functions">
                <div class="div flex-center flex-between c-pointer tran-all" v-for="(item,index) in functions"
                     :key="index"
                     @click="gotoPage(item.url)">
                    <div class="flex-center">
                        <span class="zsf-icon" :class="item.icon"></span>
                        <span class="color-666 ml-5">{{ item.name }}</span>
                    </div>
                    <span class="zsf-icon zsf-icon-shuangjiantouyou color-999 font12"></span>
                </div>
            </div>
            <div class="pl-15 pr-15 flex-center c-pointer" style="height:60px;" @click="quit">
                <span class="zsf-icon zsf-icon-set_quit_hov mr-5"></span>
                <span>退出登录</span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import config from '../common/js/config.js';
import {tool} from '../common/js/tool.js';
import request from '../common/js/request.js';

export default {
    data() {
        return {
            version: config.version,
            company_information: '',
            navs: [],
            index1: 0,
            index2: 0,
            leftIsShow: true,
            userinfo: JSON.parse(tool.getCookie('userinfo')),
            functions: [
                // {name: '个人资料', icon: 'zsf-icon-ziliao', url: '/my/userinfo'},
                {name: '修改密码', icon: 'zsf-icon-xiugaimima01', url: '/my/password'},
            ],
            userRoleId: 1
            // userRoleId: JSON.parse(tool.getCookie('userinfo'))['user_role_id']
        };
    },

    computed: {
        getTabActive() {
            return this.$store.getters.getTabActive;
        }
    },

    created() {
        this.company_information = JSON.parse(tool.getCookie('company_information'))
    },

    mounted() {
        if (!tool.getCookie('token')) {
            return this.$router.push({path: "/login"});
        }
        let res = {
            "code": 0,
            "msg": "成功",
            "data": [
                {
                    "id": 3,
                    "name": "商品管理",
                    "parent_id": 0,
                    "icon": "zsf-icon-shangpin",
                    "sort": 99,
                    "url": ""
                },
                {
                    "id": 1,
                    "name": "促销活动管理",
                    "parent_id": 0,
                    "icon": "zsf-icon-youhuiquan",
                    "sort": 88,
                    "url": "/promotion/list"
                },
                {
                    "id": 6,
                    "name": "订单管理",
                    "parent_id": 0,
                    "icon": "zsf-icon-neirongguanli",
                    "sort": 77,
                    "url": "/order/list"
                },
                {
                    "id": 7,
                    "name": "用户管理",
                    "parent_id": 0,
                    "icon": "zsf-icon-haoyou",
                    "sort": 66,
                    "url": ""
                },
                {
                    "id": 11,
                    "name": "基础数据",
                    "parent_id": 0,
                    "icon": "zsf-icon-neirongguanli",
                    "sort": 55,
                    "url": ""
                },
                {
                    "id": 18,
                    "name": "图片管理",
                    "parent_id": 0,
                    "icon": "zsf-icon-duosucai",
                    "sort": 44,
                    "url": "/resource/images"
                },
                {
                    "id": 19,
                    "name": "系统管理",
                    "parent_id": 0,
                    "icon": "zsf-icon-xitongguanli",
                    "sort": 22,
                    "url": ""
                },
                {
                    "id": 12,
                    "name": "公司信息",
                    "parent_id": 11,
                    "icon": "",
                    "sort": 7,
                    "url": "/basic/company-info"
                },
                {
                    "id": 13,
                    "name": "基础数据",
                    "parent_id": 11,
                    "icon": "",
                    "sort": 6,
                    "url": "/basic/basic-data"
                },
                {
                    "id": 20,
                    "name": "后台页面",
                    "parent_id": 19,
                    "icon": "",
                    "sort": 5,
                    "url": "/system/manage-page"
                },
                {
                    "id": 14,
                    "name": "提货地点",
                    "parent_id": 11,
                    "icon": "",
                    "sort": 5,
                    "url": "/basic/company-address"
                },
                {
                    "id": 21,
                    "name": "权限列表",
                    "parent_id": 19,
                    "icon": "",
                    "sort": 4,
                    "url": "/system/auth"
                },
                {
                    "id": 15,
                    "name": "快递公司",
                    "parent_id": 11,
                    "icon": "",
                    "sort": 4,
                    "url": "/basic/courier"
                },
                {
                    "id": 8,
                    "name": "用户列表",
                    "parent_id": 7,
                    "icon": "",
                    "sort": 4,
                    "url": "/user/list"
                },
                {
                    "id": 22,
                    "name": "系统角色",
                    "parent_id": 19,
                    "icon": "",
                    "sort": 3,
                    "url": "/system/manage-role"
                },
                {
                    "id": 16,
                    "name": "轮播图",
                    "parent_id": 11,
                    "icon": "",
                    "sort": 3,
                    "url": "/basic/banner"
                },
                {
                    "id": 9,
                    "name": "申请提现",
                    "parent_id": 7,
                    "icon": "",
                    "sort": 3,
                    "url": "/user/apply"
                },
                {
                    "id": 23,
                    "name": "管理员列表",
                    "parent_id": 19,
                    "icon": "",
                    "sort": 2,
                    "url": "/system/manage-list"
                },
                {
                    "id": 10,
                    "name": "个人认证申请",
                    "parent_id": 7,
                    "icon": "",
                    "sort": 2,
                    "url": "/user/cert"
                },
                {
                    "id": 4,
                    "name": "商品列表",
                    "parent_id": 3,
                    "icon": "",
                    "sort": 2,
                    "url": "/goods/list"
                },
                {
                    "id": 25,
                    "name": "企业认证申请",
                    "parent_id": 7,
                    "icon": "",
                    "sort": 1,
                    "url": "/user/company-cert"
                },
                {
                    "id": 24,
                    "name": "系统日志",
                    "parent_id": 19,
                    "icon": "",
                    "sort": 1,
                    "url": "/system/log"
                },
                {
                    "id": 17,
                    "name": "单页文章",
                    "parent_id": 11,
                    "icon": "",
                    "sort": 1,
                    "url": "/basic/single-list"
                },
                {
                    "id": 5,
                    "name": "商品分类",
                    "parent_id": 3,
                    "icon": "",
                    "sort": 1,
                    "url": "/goods/category"
                }
            ]
        }
        let array = res.data;
        let tmp = [{name: '首页', icon: 'zsf-icon-shouye', url: '/home', child: []}];
        for (let i = 0; i < array.length; i++) {
            if (array[i]['parent_id'] === 0) {
                array[i]['child'] = [];
                tmp.push(array[i]);
            }
        }
        for (let i = 0; i < tmp.length; i++) {
            for (let k = 0; k < array.length; k++) {
                if (tmp[i]['id'] === array[k]['parent_id']) {
                    tmp[i]['child'].push(array[k]);
                }
            }
        }
        this.navs = tmp;
        this.$store.commit('setTabs', tmp);
        this.setActive();
    },

    methods: {
        setActive() {
            let tmp = this.navs;
            this.active = this.getTabActive;
            let hash = window.location.hash.replace("#", "");
            for (let i = 0; i < tmp.length; i++) {
                if (!tmp[i]['child']) {
                    tmp[i]['child'] = [];
                }
                if (hash === tmp[i].url) {
                    this.index1 = i;
                    this.index2 = 0;
                    tmp[i]['select'] = true;
                    this.$store.commit('setTabActive', i + "-" + 0);
                    break;
                }
                for (let j = 0; j < tmp[i]['child'].length; j++) {
                    if (hash === tmp[i]["child"][j]["url"]) {
                        this.index1 = i;
                        this.index2 = j;
                        tmp[i]['select'] = true;
                        tmp[i].child[j]["select"] = true;
                        this.$store.commit("setTabActive", i + "-" + j);
                        break;
                    }
                }
            }
            this.navs = tmp;
            // tool.setCookie('navs', JSON.stringify(this.navs))
        },
        toggleLeft() {
            this.leftIsShow = !this.leftIsShow;
        },

        clickFirst(idx) {
            let tmp = [...this.navs];
            if (tmp[idx]['child'].length) {
                tmp[idx]['select'] = !tmp[idx]['select'];
                this.navs = tmp;
            } else {
                this.index1 = idx;
                this.index2 = 0;
                this.active = this.$store.getters.getTabActive;
                if (idx + '-0' === this.active) {
                    return;
                }
                this.$store.commit('setTabActive', idx + "-0");
                this.$router.push({path: tmp[idx]["url"]});
            }
        },

        clickSecend(index1, index2) {
            let tmp = [...this.navs];
            this.index1 = index1;
            this.index2 = index2;
            this.$store.commit('setTabActive', index1 + '-' + index2);
            if (!tmp[index1].child[index2]["url"]) {
                return tool.message('开发中', 'error');
            }
            let hash = window.location.hash.replace('#', '');
            if (hash == tmp[index1].child[index2]['url']) {
                return;
            }
            this.$router.push({path: tmp[index1].child[index2]['url']});
        },

        quit() {
            this.$confirm('确定要退出吗？', '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                tool.setCookie('token', '');
                tool.setCookie('userinfo', '');
                this.$router.push({path: '/login'});
            });
        }
    },

    watch: {
        getTabActive() {
            let indexs = this.getTabActive.split('-');
            this.index1 = indexs[0];
            this.index2 = indexs[1];
        },
        '$route.path'(toPath, fromPath) {
            if (toPath == fromPath) {
                return;
            }
            let tmp2 = this.navs;
            let tmp = [];
            for (let i = 0; i < tmp2.length; i++) {
                if (!tmp2[i]['roles']) {
                    tmp.push(tmp2[i]);
                    continue;
                } else {
                    for (let k = 0; k < tmp2[i].roles.length; k++) {
                        if (this.userinfo['roles'].indexOf(tmp2[i].roles[k]) > -1) {
                            tmp.push(tmp2[i]);
                            break;
                        }
                    }
                }
            }
            this.active = this.getTabActive;
            let hash = toPath;
            let a = '';
            for (let i = 0; i < tmp.length; i++) {
                if (!tmp[i]['child']) {
                    tmp[i]['child'] = [];
                }
                if (hash === tmp[i].url) {
                    this.index1 = i;
                    this.index2 = 0;
                    tmp[i]['select'] = true;
                    a = i + "-" + 0;
                }
                for (let j = 0; j < tmp[i]['child'].length; j++) {
                    if (hash === tmp[i]["child"][j]["url"]) {
                        this.index1 = i;
                        this.index2 = j;
                        tmp[i]['select'] = true;
                        tmp[i].child[j]["select"] = true;
                        a = i + "-" + j;
                        break;
                    }
                }
            }
            if (a) {
                this.$store.commit('setTabActive', a);
            } else {
                this.$store.commit('setTabActive', '99-99');
            }
            this.navs = tmp;
        },
    }

};

$(function () {
    $(document).on('click', '.pic', (e) => {
        e.stopPropagation();
        let dom = $('.user-info');
        if (dom.is(':hidden')) {
            dom.slideDown().attr('data-sfshow', true);
        } else {
            dom.slideUp().attr('data-sfshow', false);
        }
        return false;
    });
    $('body').click(() => {
        $('[data-sfshow=true]').slideUp().attr('data-sfshow', false);
    });
})
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../common/css/variable.less");

.page-container {
    width: 100%;
    height: 100%;
    background: white;

    .article {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: stretch;
        clear: both;

        .article-left {
            width: 270px;
            height: 100%;
            background: #252831;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;

            .account-info {
                height: auto;
                width: 100%;
                background: #30333c;
                color: #fff;
                border-radius: 4px;
            }

            .logo {
                height: 60px;
                width: 100%;
                border-bottom: 1px solid #353535;
            }

            .left-div {
                flex: 1;
                height: 0;
                overflow-y: auto;
                overflow-x: hidden;

                &::-webkit-scrollbar {
                    display: none;
                }

                ul {
                    li {
                        dl {
                            dt {
                                width: 100%;
                                height: 36px;
                                line-height: 36px;
                                display: flex;
                                justify-content: space-between;
                                padding: 0 10px 0 12px;
                                align-items: center;
                                font-size: 16px;
                                color: #7d8593;
                                border-radius: 4px;

                                div {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;


                                    .zsf-icon {
                                        font-size: 20px;
                                    }
                                }

                                &:hover, &.active {
                                    background: #8d98aa;

                                    span {
                                        color: white;
                                    }

                                    .zsf-icon {
                                        color: white;
                                    }
                                }
                            }

                            dd {
                                width: 100%;
                                height: auto;
                                overflow: hidden;
                                padding-left: 30px;

                                div {
                                    height: 26px;
                                    line-height: 26px;
                                    width: 50%;
                                    color: #666;
                                    float: left;

                                    &.width100 {
                                        width: 100%;
                                    }

                                    span {
                                        display: inline-block;
                                        height: 26px;
                                        border-radius: 3px;
                                        padding: 0 10px;
                                        color: #b3e2f2;
                                    }

                                    &.active,
                                    &:hover {
                                        span {
                                            background: #8d98aa;
                                            color: white;
                                        }

                                        .zsf-icon {
                                            color: white;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .article-right {
            flex: 1;
            width: 0;
            height: 100%;
            /*align-items: stretch;*/
            display: flex;
            flex-direction: column;
            /*overflow: hidden;*/
            background: #ecebf0;

            .article-right-top {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: white;

                .d {
                    img {
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                    }
                }
            }

            .right-div {
                flex: 1;
                height: 0;
                overflow-y: auto;
                overflow-x: hidden;
            }
        }
    }
}

.user-info {
    width: 300px;
    height: auto;
    position: fixed;
    right: 5px;
    top: 65px;
    z-index: 19;
    background: white;
    box-shadow: 0 0 20px #ccc;

    .functions {
        width: 300px;
        border-top: 1px solid #eee;

        .div {
            width: 300px;
            height: 50px;
            padding: 0 20px;
            border-bottom: 1px solid #eee;

            &:hover {
                background: #f3f3f3;
            }
        }
    }

    .u {
        background: #409EFF;
        color: white;

        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    }

    .quit {
        width: 100%;
        height: 50px;
        background: #909399;
    }
}
</style>
